<template>
	<view class="sqc-box">
		<view style="width: 590rpx;display: flex;justify-content: flex-end;">
			<image src="../../static/images/ic_pop_close.png" class="ic-pop-close" mode="" @click="hide"></image>
		</view>
		<view class="qr-code-box" :style="{backgroundImage:'url('+contactBg+')'}" >
			<view class="qc-title" style="visibility: hidden;">联系客服</view>
			<image class="qc-img" :src="qrCode" mode="aspectFill" :show-menu-by-longpress="true"></image>
			<view class="qc-tip">长按识别上方二维码添加客服</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "show-qr-code",
		props:['qrCode'],
		data() {
			return {
				contactBg:this.imgBaseURL+'/customer/qrcode_bg.png'
			};
		},
		methods: {
			hide(){
				this.$emit('hide');
			}
		}
	}
</script>

<style lang="scss">
	.sqc-box{
		position: fixed;
		width: 100vw;
		height: 100vh;
		left: 50%;
		top: 50%;
		transform: translate(-50%,-50%);
		background-color: rgba(0, 0, 0, 0.4);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		z-index: 999;
	}
	
	.ic-pop-close{
		width: 60rpx;
		height: 60rpx;
		margin-bottom: 30rpx;
	}
	
	.qc-title{
		width: 100%;
		text-align: center;
		font-size: 30rpx;
		font-weight: bold;
		color: #FFFFFF;
	}
	.qr-code-box{
		width: 590rpx;
		height: 645rpx;
		background-size: 100% 100%;
		padding-top: 57rpx;
	}
	.qc-img{
		width: 328rpx;
		height: 328rpx;
		display: block;
		margin: 0 auto;
		margin-top: 130rpx;
	}
	.qc-tip{
		width: 100%;
		font-size: 28rpx;
		color: #333435;
		margin-top: 34rpx;
		text-align: center;
	}
</style>
